<template>
    <div class='box'>
      <!-- 地址区域 -->
      <div class="adress">
        <div class="big">
          <div class="left">
            <p>{{defaultList.value.userPhone}}</p>
            <p>
              <span>{{defaultList.value.provinceName}}</span> <span>{{defaultList.value.cityName}}</span> <span>{{defaultList.value.regionName}}</span> <span>{{defaultList.value.detailAddress}}</span> <span>{{defaultList.value.userName}}</span> 
            </p>
          </div>
          <div class="right">
            <van-icon name="arrow" @click="router.push('/addhome')"/>
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="list">
        <van-card
          v-for="(item,index) in orderList" :key="index"
          :num="item.goodsCount"
          :price="item.sellingPrice" 
          :title="item.goodsName"
          :thumb="item.goodsCoverImg"
          style="text-align:left"
        >
          <template #price>
            <span class="price">￥{{item.sellingPrice}}</span>
          </template>
        </van-card>
      </div> 
      <!-- 顶部搜索框 -->
      <div class="top">
        <b class="left">
          <van-icon name="arrow-left" @click="goBack"/>
        </b> 
        <div class="search">
            生成订单
        </div>
        <div class="right"><van-icon name="weapp-nav" /></div>
      </div>
      <!-- 底部生成订单 -->
      <div class="bottom">
        <div class="title">
          <span>金额</span>
          <span class="price">￥123</span>
        </div>
        <van-button class="btn" @click="product">生成订单</van-button>
      </div>
      <!-- 弹出层 -->
      <div class="biu" v-if="isshow" @click="close">
        <div class="dialog">
          <van-button class="btn" style="background:rgb(69, 125, 230)" @click.stop="pay(1)">支付宝支付</van-button><br>
          <van-button class="btn" @click.stop="pay(2)">微信支付</van-button>
        </div>
      </div>
      
    </div>
</template>

<script>
import api from "../http/api.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import { Popup, ActionSheet } from "vant";

export default {
  setup(props) {
    const store = useStore();
    const router = useRouter();
    const isshow = ref(false);
    const orderId = ref(""); //生成的订单id
    const orderList = reactive([]);
    const defaultList = reactive({
      value: {}
    });
    const idsList = reactive([]);
    // 获取选择购买的商品列表
    const getPayList = async () => {
      let res = await api.setOrder(idsList);
      // console.log(res, "获取要购买的商品列表数据");
      // 赋值给订单列表
      orderList.push(...res.data.data);
      console.log(orderList, "购买的列表");
    };
    // 获取默认收货地址列表
    const getAdress = async () => {
      let res = await api.setdefault();
      console.log(res, "获取默认收货地址");
      if (!res.data.data) {
        console.log("跳转新增地址");
        // 立即跳转到新增收获地址页面
        router.push("/addhome");
      } else {
        defaultList.value = res.data.data;
        console.log(defaultList.value.cityName);
      }
    };
    // 返回首页
    const goBack = () => {
      store.commit("setTab", { act: 2, isShow: true });
      //   返回购物车
      router.push("/cart");
    };
    // 生成订单
    const product = async () => {
      let { addressId } = defaultList.value;
      // console.log(addressId, idsList);
      let obj = {
        addressId: addressId,
        cartItemIds: idsList
      };
      // 请求生成订单接口
      let res = await api.Order(obj);
      if (res.data.resultCode == 200) {
        console.log("选择支付方式");
        orderId.value = res.data.data;
        isshow.value = true;
      }
    };
    // 选择支付方式
    const pay = async(flag) => {
      console.log(flag, "支付宝1 微信2");
      let obj = {
        orderNo:Number(orderId.value),
        payType: flag
      };
      // console.log(obj);
      // 请求支付接口 
      let res = await api.pay(obj);
      if (res.data.resultCode == 200) {
        router.push("/orderList")
      }
    };
    // 关闭对话框
    const close = () => {
      isshow.value = false;
    };
    onMounted(() => {
      // 获取路由传递的id值
      let { ids } = router.currentRoute.value.query; 
      let arr = ids.split(","); 
      arr.forEach((item, index) => {
        arr[index] = Number(item);
      });
      idsList.push(...arr);
      getPayList();
      getAdress(); 
    });
    return {
      goBack,
      store,
      isshow,
      orderId,
      router,
      orderList,
      defaultList,
      idsList,
      getPayList,
      getAdress,
      product,
      pay,
      close
    };
  }
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  .adress {
    width: 100%;
    padding-top: 100px;
    .big {
      font-size: 30px;
      width: 100%;
      height: 160px;
      box-sizing: border-box;
      padding: 10px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .left {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
      }
    }
    .big:after {
      content: "";
      background: repeating-linear-gradient(
        -45deg,
        #ff6c6c,
        #ff6c6c 20%,
        transparent 0,
        transparent 25%,
        #1989fa 0,
        #1989fa 45%,
        transparent 0,
        transparent 50%
      );
      background-size: 2.13333rem;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
    }
  }
  .top {
    width: 100%;
    height: 100px;
    background: #fff;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    .search {
      width: 80%;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      text-align: center;
    }
  }
  .list {
    .price {
      color: red;
      font-size: 35px;
    }
  }
  .bottom {
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 30px;
    .title {
      width: 90%;
      margin: 30px auto 10px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        color: red;
      }
    }
  }
  .btn {
    border: none;
    border-radius: 10px;
    color: #fff;
    width: 90%;
    margin: 0 auto;
    background: #1baeae;
  }
  .biu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .dialog {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 250px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 5;
    }
  }
}
</style>
